<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades">产品工序</i>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container" >

            <div class="handle-box" >
                <el-select v-model="productModel" placeholder="请选择产品编号"  class="handle-select mr10">
                    <el-option
                            v-for="item in productList"
                            :key="item.id"
                            :label="item.productModel"
                            :value="item.productModel">
                    </el-option>
                </el-select>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">查看</el-button>
                <!--        增加记录        -->
                <el-button type="primary" icon="el-icon-upload" @click="handleEdit">修改</el-button>
                <el-button icon="el-icon-download" @click="exportExcel">导出</el-button>
            </div>

            <div >
                <div ref="file" ></div>
            </div>
        </div>

        <!-- 修改弹出框 -->
        <el-dialog title="修改产品工序" :visible.sync="editVisible" width="30%">

            <el-form label-width="95px">

                <el-form-item label="产品型号" style="margin-left:-20px">
                    <el-select v-model="productModel" value-key="id" class="handle-select mr10">
                        <el-option
                                v-for="item in productList"
                                :key="item.id"
                                :label="item.productModel"
                                :value="item.productModel">
                        </el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <el-upload
                    class="upload-demo"
                    ref="upload"
                    action="/api/procedure/updateProcedure"
                    :file-list="fileList"
                    :headers="myHeaders"
                    :on-exceed="handleExceed"
                    :on-success="handleSuccess"
                    :on-error="handleError"
                    :limit="1"
                    :data="{productModel:productModel}"
                    :auto-upload="false">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>

            <div  class="el-upload__tip" style="margin-bottom: -40px">只能上传docx文件，且原有文件将被替代</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
            </span>
        </el-dialog>


    </div>





</template>


<script>
    window.JSZip = require("jszip");
    import { fetchData } from '../../../api/index';
    let docx = require('docx-preview');
    export default {
        name: 'procedure',
        data() {
            return {
                query: {
                    productModel:'',
                },
                myHeaders: {Authorization: sessionStorage.getItem("token")},
                productModel:'',
                fileList:{},
                productList:[],
                editVisible: false,
                addVisible: false,

            };
        },

        created() {
            this.$message.success("请选择产品型号后再产看工序");
            this.getProduct();
        },
        methods: {
            //导出文件
            exportExcel(){
                this.$axios.get('/api/procedure/exportProcedure?model='+this.productModel, {
                    responseType: 'blob',
                }).then(response => {
                    const conent = response.data;

                    const blob = new Blob([conent]);
                    let fileName = response.headers["content-disposition"].split("=")[1];
                    if (window.navigator.msSaveOrOpenBlob) {
                        window.navigator.msSaveOrOpenBlob(blob, fileName);
                    }
                    let url = window.URL.createObjectURL(blob);

                    let a = document.createElement("a");
                    document.body.appendChild(a);
                    a.href = url;

                    a.download = decodeURI(fileName); //命名下载名称
                    a.click(); //点击触发下载
                    window.URL.revokeObjectURL(url);  //下载完成进行释放
                    this.$message.success("导出成功");
                }).catch(

                    error=>{
                        this.$message.error("导出失败");
                    }
                )
            },
            //返回成功的钩子
            handleSuccess(response, file, fileList){
                this.$message.success("修改成功");
                this.$refs.upload.clearFiles();
                this.fileList={};
                this.editVisible=false;
            },
            //返回失败的钩子
            handleError(err, file, fileList){
                this.$message.error("修改失败");
                this.$refs.upload.clearFiles();
                this.fileList={};
                this.editVisible=false;
            },

            //选择两个文件时报错
            handleExceed(files, fileList) {
                this.$message.warning('请将已选择文件删除后，再重新选择文件');
            },
            //upload提交
            submitUpload() {
                if(this.productModel===''){
                    this.$message.warning("请选择要修改的产品型号")
                }else if (this.$refs.upload.uploadFiles.length===0) {
                    this.$message.warning("请选择要上传的文件")
                }else {

                    this.$refs.upload.submit();

                }
            },
            //查看选中的工序图
            handleSearch(){
                if(this.productModel===''){
                    this.$message.warning("请选择要查看的产品型号");
                }else {
                    this.$axios.get('/api/procedure/download?model='+this.productModel, {
                        responseType: 'arraybuffer',
                    }).then(({data}) => {
                        docx.renderAsync(data, this.$refs.file) // 获取到biob文件流，进行渲染到页面预览
                    }).catch(
                        error=>{
                            this.$message.error("查看失败");
                        }
                    )
                }

            },

            //获取产品下拉列表
            getProduct(){
                this.$axios.get('/api/product/selectAll').then((res) => {
                    if (res.data.code!=="200"){
                        this.$message.error(res.data.message);
                    } else {
                        this.productList=res.data.data;
                    }
                })
            },
            //修改工序文件
            handleEdit(){
                this.editVisible=true;
            }

        }
    };
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 200px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }

    .bbb{
        margin-top:  0px;
    }


</style>